<template>
  <div class="tabs-container vertical-tabs">
    <a-tabs v-model:activeKey="activeKey" centered tabPosition="left">
      <a-tab-pane key="1" tab="项目介绍" class="vertical-tab-pane">
        <div v-if="isLoading" class="loading-container">
          <div class="loader"></div>
        </div>
        <div v-else class="image-grid-vertical">
          <!-- 项目介绍内容 -->
          <div v-for="(prjInfo, index) in prjInfos" :key="prjInfo.id" class="project-info-vertical">
            <div class="project-title">
              <h2>{{ prjInfo.title }}</h2>
            </div>
            <div class="project-img">
              <img src="../images/qht.png" alt="">
            </div>
            <div class="project-content">
              <p>{{ prjInfo.content }}</p><br>
            </div>
          </div>
          <hr class="styled-hr">
          <!-- 项目功能内容 -->
          <div v-for="(prjFunc, index) in prjFuncs" :key="index" class="project-function-vertical">
            <div class="project-function-title">
              <h2>⦁&nbsp;&nbsp;{{ prjFunc.title }}</h2>
            </div>
            <div class="project-content">
              <p>{{ prjFunc.content }}</p><br>
            </div>
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getProjectFunctionAPI, getProjectIntroductionAPI } from '../apis/homeAPI.js';

const prjInfos = ref([]);
const prjFuncs = ref([]);
const activeKey = ref('1');
const isLoading = ref(true);

const getProjectIntroduction = async () => {
  try {
    const res = await getProjectIntroductionAPI();
    const { data } = res;
    prjInfos.value = data.map(item => ({
      id: item.id,
      title: item.attributes.title,
      content: item.attributes.information
    }));
  } catch (error) {
    console.error('Error fetching project introduction data:', error);
  } finally {
    isLoading.value = false; // 数据获取完成后，设置加载状态为 false
  }
};

const getProjectFunction = async () => {
  try {
    const res = await getProjectFunctionAPI();
    const { data } = res;
    prjFuncs.value = data.map(item => ({
      title: item.attributes.title,
      content: item.attributes.information
    }));
  } catch (error) {
    console.error('Error fetching project function data:', error);
  } finally {
    isLoading.value = false; // 数据获取完成后，设置加载状态为 false
  }
};

onMounted(() => {
  getProjectIntroduction();
  getProjectFunction();
});
</script>

<style scoped>
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px; /* 设置高度以使加载图标居中 */
}

.loader {
  border: 8px solid rgba(255, 255, 255, 0.3); /* 背景透明的边框 */
  border-top: 8px solid #3498db; /* 顶部颜色 */
  border-radius: 50%; /* 圆形 */
  width: 50px; /* 图标宽度 */
  height: 50px; /* 图标高度 */
  animation: spin 1s linear infinite; /* 旋转动画 */
}

/* 定义旋转动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.styled-hr {
  border: none;
  height: 2px; /* 下划线高度 */
  background: linear-gradient(to right, #f06, #4a90e2); /* 渐变色 */
  margin: 20px 0; /* 上下边距 */
}
</style>
